<template>
	<view style="padding-bottom: 120rpx;">
		<view class="head-box">
			<!-- :autoplay="true" -->
			<swiper class="head-swiper" :interval="2000" :duration="1000" :circular="true">
				<swiper-item v-for="(m,n) in bannerLists" :key="n">
					<image class="swiper-img" :src="m" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="news-box" v-if="goodsInfo.sku">
			<!-- <view >{{userInfo.area==2?'$':''}}{{goodsInfo.sku[0].price}}</view> -->
			<view class="news-price" v-if="(goodsInfo.min_price/1) == (goodsInfo.max_price/1)">
				<text>{{userInfo.area==2?'$':''}}{{goodsInfo.min_price/1}}</text>
			</view>
			<view class="news-price" v-else>
				<text>{{userInfo.area==2?'$':''}}{{goodsInfo.min_price/1}}</text>~<text>{{userInfo.area==2?'$':''}}{{goodsInfo.max_price/1}}</text>
			</view>
			<view class="news-name gray3">{{goodsInfo.good_name}}</view>
		</view>

		<view class="gg-box" @click="ggShow()">
			<view class="gg-left gray9">{{$t('shop').选择}}</view>
			<view class="gg-right">
				<view class="align-center justify-between">
					<view class="gg-text gray3">{{$t('shop').请选择规格}}</view>
					<view class="gg-text gray9" style="font-weight: bold;">· · ·</view>
				</view>
				<scroll-view scroll-x="true" class="gg-good">
					<view>
						<image class="gg-img radius8" v-for="(m,n) in goodsInfo.sku" :key="n"
							:src="m.image || goodsInfo.cover" mode="">
						</image>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="xq-box tc">
			<view class="xq-title gray3">{{$t('shop').商品详情}}</view>
			<view class="w100" v-for="(item,index) in detailImages" :key="index">
				<image style="width: 100%;" :src="item"></image>
			</view>
		</view>

		<view class="dh-box" @click="ggShow()">
			<view class="dh-btn">{{$t('shop').立即兑换}}</view>
		</view>

		<!-- 规格 -->
		<u-popup :show="ggpop" :closeable="true" @close="ggHide(0)" :safeAreaInsetBottom="false" >
			<view class="ggpop-box">
				<view class="ggpop-news align-center">
					<image class="ggpop-img" :src="selgoodsInfo.image || goodsInfo.cover" mode="aspectFill"
						@click="ggImgBtn('../../static/images/ls/1.jpg')"></image>
					<view v-if="goodsInfo.sku">
						<view class="ggpop-pric">
							{{userInfo.area==2?'$':''}}{{selgoodsInfo.price/1 || goodsInfo.sku[0].price/1}}
						</view>
						<!-- || $t('shop').套组 -->
						<view class="ggpop-gg gray3">{{$t('shop').已选}}“{{selgoodsInfo.sku}}”</view>
					</view>
				</view>

				<view class="ggpop-con" v-for="(item,index) in goodsInfo.attr" :key="index">
					<view class="ggpop-c-title gray3">{{item.name}}</view>
					<view class="align-center flex-wrap">
						<view class="ggpop-c-item gray3 clamp" v-for="(m,n) in item.data" :key="n"
							:class="[item.selgoods==n&&m.stock!=0?'ggpop-c-ac':'',item.selgoods!=n&&m.stock==0?'bgE':'']"
							@click="ggBtn(index,n)">
							{{m.value}}
						</view>
					</view>
				</view>
				<view class="align-center justify-between" style="margin: 25rpx 0 160rpx;">
					<view class="gray3" style="font-size: 28rpx;font-weight: bold;">{{$t('shop').购买数量}}</view>
					<!-- 					<view>
						<u-number-box v-model="product_num" :disabledInput="true" :integer="true"
							@change="valChange"></u-number-box>
					</view> -->
					<view class="align-center bd97 radius2">
						<view @click.stop="reduce()" class="tc ptb3" style="width: 60rpx;"><text>-</text></view>
						<view class="bordlf tc ptb3">
							<input @blur='burr' @input="changeValue" v-model="product_num" type="number"
								style="width: 100rpx;" placeholder-class="placeholderStyle" />
						</view>
						<view @click.stop="add()" class="tc ptb3" style="width: 60rpx;"><text>+</text></view>
					</view>
				</view>

				<view class="ggpop-btn" @click="ggHide(1)">{{$t('shop').立即兑换}}</view>
			</view>
		</u-popup>

		<!-- 图片预览 -->
		<view v-if="imgpop" class="img-box" @click="imgpop=false">
			<image class="img-url" :src="imgUrl" mode="widthFix"></image>
		</view>
		<!-- 返回首页 -->
		<view @click="goindex()" class="bgWhite radius50 justify-center align-center posFixed zIndex999"
			style="width: 80rpx;height: 80rpx;box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(187,187,187,0.3); right: 24rpx;bottom: 100rpx;">
			<view class="ft10 gray9" style="width: 40rpx;"><text>{{$t('shop').返回首页}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgpop: false,
				ggpop: false,
				product_num: 1, //商品数量
				id: '', //商品的id
				goodsInfo: {}, //商品信息
				bannerLists: [], //轮播图信息
				selSku: [], //过滤出的商品信息
				selSkuid: '', //选中的商品id
				selgoodsInfo: {}, //选中商品的信息
				detailImages: [], //商品详情
				curreny: uni.getStorageSync('currency'), //币种
			}
		},

		onLoad(options) {
			this.$store.dispatch('getuserInfo')
			this.id = options.id
			this.getpruductdetailAPI()
			uni.setNavigationBarTitle({
				title: this.$t('mine').加油站
			})

		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		methods: {
			// 获取商品详情
			async getpruductdetailAPI() {
				const res = await this.$api.getpruductdetail({
					good_id: this.id
				})
				let moduleGroup = []
				// console.log(res.data)
				res.data.attr.forEach((item) => {
					let obj = {
						name: item.k,
						data: []
					}
					item.v.forEach((itm) => {
						obj.data.push({
							'value': itm
						})
					})
					moduleGroup.push(obj)
				})

				this.goodsInfo = res.data
				// moduleGroup.forEach((item, index) => {
				// 	item.data.forEach((m,n)=>{
				// 		this.$set(item, 'selgoods', n)
				// 	})
				// })
				this.goodsInfo.attr = moduleGroup
				// this.goodsInfo.attr.forEach((item, index) => {

				// })
				let sku = this.goodsInfo.sku
				console.log(sku)
				for (let i = 0; i < sku.length; i++) {
					if (sku[i].stock > 0) {
						console.log(sku[i].sku)
						this.selgoodsInfo = sku[i]
						let selarr = sku[i].sku.split(',')
						console.log(selarr)
						selarr.forEach((item, index) => {
							moduleGroup.forEach((m, n) => {
								m.data.forEach((x, y) => {
									if (item == x.value) {
										this.$set(m, 'selgoods', y)
									}
								})
							})
						})
						break;
					}
				}
				console.log(moduleGroup)
				this.selallSpecs()
				this.bannerLists = JSON.parse(res.data.images)
				this.detailImages = JSON.parse(res.data.detail)
			},

			// 规格弹窗打开
			ggShow(val) {
				this.ggpop = true;
			},
			// 规格选择
			ggBtn(index, n) {
				// if (this.goodsInfo.attr[index].selgoods == n) {
				// 	this.$set(this.goodsInfo.attr[index], 'selgoods', undefined)
				// } else {

				// }
				if (this.goodsInfo.attr[index].data[n].stock == 0) {
					return
				}
				this.$set(this.goodsInfo.attr[index], 'selgoods', n)
				// let selnum = this.goodsInfo.attr.filter((item, index) => {
				// 	return item.selgoods >= 0
				// })

				// console.log(selnum.length)
				// 选中n-1
				// if (selnum.length == this.goodsInfo.attr.length - 1) {
				// 	this.getspecs() //获取商品的库存
				// }
				// 全部选中
				// if (selnum.length == this.goodsInfo.attr.length) {
				// 	// console.log(this.goodsInfo.attr[index].data[n].stock)
				// 	// if (this.goodsInfo.attr[index].data[n].stock == 0) {
				// 	// 	this.$set(this.goodsInfo.attr[index], 'selgoods', undefined)
				// 	// 	this.getspecs() //获取商品的库存
				// 	// 	this.$utils.msg('规格库存不足')
				// 	// } else {

				// 	// }

				// 	// 筛选判断状态

				// }
				this.selallSpecs(index, n) //获取选择的商品规格
			},

			// 规格图片预览
			ggImgBtn(val) {
				// this.imgpop = true;
				// this.imgUrl = val;
			},
			// 商品数量加减
			valChange(e) {
				this.product_num = e.value;
			},
			// 商品加
			add() {
				if (this.selgoodsInfo.stock > this.product_num) {
					this.product_num++
				}
			},
			// 商品减
			reduce() {
				if (this.product_num > 1) {
					this.product_num--
				}
			},
			burr(value) {
				if (value.detail.value < 0 || value.detail.value == '') {
					this.product_num = 1
				}
			},
			// 手动输入
			changeValue(value) {
				console.log(value)
				// 			this.$nextTick(() => {
				// 				if(value.detail.value==''){
				// 					this.product_num=1
				// 				}else{

				// 				}

				// 			})
				this.$nextTick(() => {
					if (this.selgoodsInfo.stock > value.detail.value) {
						this.product_num = value.detail.value
					} else {
						this.product_num = this.selgoodsInfo.stock
					}
				})

			},
			//过滤出选择的商品规格的库存
			// getspecs() {
			// 	let noselnum = this.goodsInfo.attr.filter((item, index) => {
			// 		return !item.selgoods
			// 	})
			// 	console.log(noselnum)
			// 	let skuArr = [];
			// 	// 循环遍历出剩余的组合
			// 	for (let i = 0; i < noselnum[0].data.length; i++) {
			// 		let arr = []
			// 		this.goodsInfo.attr.forEach((item, index) => {
			// 			if (item.selgoods >= 0) {
			// 				item.data.forEach((m, n) => {
			// 					if (item.selgoods == n) {
			// 						arr.push(m.value)
			// 					}
			// 				})
			// 			} else {
			// 				arr.push(item.data[i]?.value)
			// 			}
			// 		})
			// 		skuArr.push(arr)
			// 	}

			// 	// 循环转化为字符串
			// 	skuArr.forEach((item, index) => {
			// 		this.selSku[index] = item.join(',')
			// 	})
			// 	// 添加库存给每一项
			// 	this.goodsInfo.attr.forEach((x, y) => {
			// 		if (x.selgoods == undefined) {
			// 			this.goodsInfo.sku.forEach((item, index) => {
			// 				this.selSku.forEach((m, n) => {
			// 					if (this.selSku[n] == item.sku) {
			// 						this.$set(this.goodsInfo.attr[y].data[n], 'stock', item.stock)
			// 					}
			// 				})

			// 			})
			// 		}
			// 	})
			// },

			// 选择全部的商品规格
			selallSpecs(selindex, seln) {
				let allskuArr = []
				// console.log(this.goodsInfo.attr)
				this.goodsInfo.attr.forEach((item, index) => {
					item.data.forEach((m, n) => {
						if (item.selgoods == n) {
							allskuArr.push(m.value)
						}
					})
				})
				console.log(allskuArr)
				this.othersku(allskuArr)
				this.goodsInfo.sku.forEach((item, index) => {
					if (allskuArr.join(',') == item.sku) {
						if (item.stock > 0) {
							this.selgoodsInfo = item

							// this.$set(this.goodsInfo.attr[selindex], 'selgoods', seln)
						} else {
							// console.log(item)

							// this.$set(this.goodsInfo.attr[selindex], 'selgoods', undefined)

							// // this.$set(this.goodsInfo.attr[selindex].data[seln], 'stock', item.stock)
							// // this.getspecs()
							// this.$utils.msg(this.$t('shop').商品库存不足)
							// this.selgoodsInfo = ''
						}

					}

				})
			},
			// 筛选判断其它库存状态
			othersku(allskuArr) {
				// let arr = allskuArr
				// console.log(allskuArr)
				this.goodsInfo.attr.forEach((item, index) => {
					var arr = allskuArr.slice(0)
					item.data.forEach((m, n) => {
						if (item.selgoods != n) {
							arr[index] = m.value
							// console.log(arr)

							this.goodsInfo.sku.forEach((x, y) => {
								if (arr.join(',') == x.sku) {
									this.$set(this.goodsInfo.attr[index].data[n], 'stock', x.stock)
								}
							})
						}
					})
				})
				// console.log(this.goodsInfo.attr)
			},
			// 规格弹窗关闭
			ggHide(val) {
				if (val == 1) {
					if (!this.selgoodsInfo.id) {
						return this.$utils.msg(this.$t('shop').已售罄)

					}
					if (this.selgoodsInfo.stock < this.product_num) {
						return this.$utils.msg(this.$t('shop').已售罄)
					}
					this.ggpop = false;
					this.navTo(
						`/pages/mine/good-order?good_id=${this.id}&sku_id=${this.selgoodsInfo.attr_sn}&product_num=${this.product_num}&sku=${this.selgoodsInfo.sku}`
					)
				} else {
					this.ggpop = false;
				}
			},
			// 返回首页
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.head-swiper {
		width: 100vw;
		height: 750rpx;
		box-sizing: border-box;

		.swiper-img {
			width: 100%;
			height: 750rpx;
			box-sizing: border-box;
		}
	}

	.news-box {
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		background: #ffffff;
		margin-bottom: 24rpx;

		.news-price {
			color: #F23C4B;
			font-size: 42rpx;
			font-weight: bold;
			margin-bottom: 24rpx;
		}

		.news-name {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.gg-box {
		display: flex;
		padding: 32rpx 24rpx;
		background: #ffffff;
		margin-bottom: 24rpx;

		.gg-left {
			font-size: 24rpx;
			margin-right: 24rpx;
		}

		.gg-right {
			width: 630rpx;
			box-sizing: border-box;
			padding-left: 24rpx;

			.gg-text {
				font-size: 24rpx;
			}

			.gg-good {
				width: 600rpx;
				white-space: nowrap;
				margin-top: 24rpx;

				.gg-img {
					width: 98rpx;
					height: 100rpx;
					margin-right: 14rpx;
				}
			}
		}
	}

	.xq-box {
		padding: 0 24rpx 24rpx;
		background: #ffffff;

		.xq-title {
			padding: 32rpx;
			font-size: 30rpx;
		}

		.xq-con {
			width: 100%;
			height: 229rpx;
			background: #D8D8D8;
		}
	}

	.dh-box {
		width: 100vw;
		background: #ffffff;
		padding: 14rpx 32rpx;
		background: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;

		.dh-btn {
			border-radius: 100rpx;
			width: 100%;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background: #F44A42;
			font-size: 32rpx;
			color: #ffffff;
		}
	}

	.ggpop-box {
		padding: 32rpx;

		.ggpop-news {
			.ggpop-img {
				width: 160rpx;
				height: 160rpx;
				margin-right: 32rpx;
			}

			.ggpop-pric {
				color: #F23C4B;
				font-size: 36rpx;
				font-weight: bold;
			}

			.ggpop-gg {
				font-size: 24rpx;
				margin-top: 24rpx;
			}
		}

		.ggpop-con {
			padding: 25rpx 0;

			.ggpop-c-title {
				font-size: 30rpx;
				font-weight: bold;
			}

			.ggpop-c-item {
				max-width: 686rpx;
				font-size: 24rpx;
				padding: 12rpx 24rpx;
				border: 2rpx solid #ccc;
				border-radius: 4rpx;
				margin: 24rpx 24rpx 0 0;
			}

			.ggpop-c-ac {
				color: #F23C4B;
				border: 2rpx solid #F23C4B;
			}
		}

		.ggpop-btn {
			width: 686rpx;
			height: 70rpx;
			color: #ffffff;
			text-align: center;
			line-height: 70rpx;
			font-size: 32rpx;
			background: #F44A42;
			border-radius: 100rpx;
		}
	}

	.img-box {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10077;

		.img-url {
			width: 100vw;
			height: 1000rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.bordlf {
		border-left: 2rpx solid #979797;
		border-right: 2rpx solid #979797;
	}
</style>